import type { ProDescriptionsItemProps } from '@/components/ProDescriptions';
import ProDescriptions from '@/components/ProDescriptions';
import React from 'react';
import type { ReserveDetail } from '../../data';
import {
  CommonSelectionStatus,
  ReservationOrderStatus,
  ReservationPaymentStatusEnum,
} from '../../utils/utils';

const Index: React.FC<{
  id?: string;
  request: (id: string) => Promise<{ success: boolean; data?: ReserveDetail }>;
}> = ({ id = '', request }) => {
  const columns: ProDescriptionsItemProps<ReserveDetail>[] = [
    {
      label: '创建时间',
      dataIndex: 'createTime',
    },
    {
      label: '状态',
      dataIndex: 'status',
      render: (_, record) => ReservationOrderStatus.parse(record?.order_status || 1).label,
    },
    {
      label: '预约开始时间',
      dataIndex: 'startDate',
    },
    {
      label: '预约结束时间',
      dataIndex: 'endDate',
    },
    {
      label: '车场',
      dataIndex: 'zoneName',
      render: (_, record) => record?.zoneName,
    },
    {
      label: '车位号',
      dataIndex: 'spaceName',
      render: (_, record) => record?.spaceName,
    },
    {
      label: '预约费用',
      dataIndex: '',
      render: (_, record) => record?.total_reserve_fee,
    },
    {
      label: '支付状态',
      dataIndex: '',
      render: (_, record) =>
        CommonSelectionStatus.parse(record?.payment_status || -1, ReservationPaymentStatusEnum)
          .label,
    },
  ];

  return (
    <ProDescriptions
      title="预约记录详情"
      column={1}
      columns={columns}
      params={{ id }}
      request={() => request(id)}
    />
  );
};

export default Index;
